<%@ page import="com.apexedu.portal.constant.Constants" %>
<%@ page import="java.util.Random" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    request.setAttribute("basePath", request.getContextPath());
    Random rand =new Random();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title><%=Constants.ProjectInfo.PROJECT_NAME%></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <link type="text/css" rel="stylesheet" href="${basePath}/resources/css/mh.shd.css">
    <link type="text/css" rel="stylesheet" href="${basePath}/resources/css/portal.server.css"/>
    
    <script type="text/javascript" src="${basePath}/clientui/js/jquery-1.4.js"></script>
    <script type="text/javascript" src="${basePath}/resources/js/mh.shd.index.js"></script>
    
    <script type="text/javascript">
        $(function () {
            //菜单分类数
            var countUl = $("ul.typeUl > li").length;
            $(".typeUlDiv,ul.typeUl").width(countUl * 83);
            if (countUl > 8) { //大于八个分类时显示滚动按钮
                $(".turnRightDiv").addClass("choosed");
                $(".turnRightDiv.choosed").live("click", function () { //向左滚动按钮点击事件
                    var left = parseInt($(".typeUlDiv").css("left").replace("px", ""), 10);
                    if (left + countUl * 83 - 83 < 665) {
                        $(".turnRightDiv").removeClass("choosed");
                    }
                    $(".typeUlDiv").css("left", left - 83);
                    $(".turnLeftDiv").addClass("choosed");
                });
                $(".turnLeftDiv.choosed").live("click", function () {//向右滚动按钮点击事件
                    var left = parseInt($(".typeUlDiv").css("left").replace("px", ""), 10);
                    $(".typeUlDiv").css("left", left + 83);
                    if (left + 83 == 0) {
                        $(".turnLeftDiv").removeClass("choosed");
                    }
                    $(".turnRightDiv").addClass("choosed");
                })
            } else { //小于八个分类时隐藏滚动按钮
                $(".turnRightDiv,.turnLeftDiv").hide();
            }

            $("ul.typeUl > li").live("click", function () {
                var index = $(this).prevAll().length;
                $("ul.typeUl > li").removeClass("choosed");
                $(this).addClass("choosed");
                $(".kdyDiv ul.subMenuUl.choosed").removeClass("choosed");
                $(".kdyDiv ul.subMenuUl:eq(" + index + ")").addClass("choosed");
            });

            //隐藏已订阅的服务
            $(".dyDiv li[menuid]").each(function () {
                $("li[menuid='" + $(this).attr("menuid") + "']").not(this).hide().attr("dy", "true");//搜索标识
            })

            var portletid = $("#portletid").val();
            //订阅服务资源
            $(".kdyDiv li[menuid] .dyan").live("click", function () {
                var $li = $(this).parents("li:first");
                var menuid = $li.attr("menuid");
                var menutb = $li.attr("menutb");
                var menuname = $li.attr("menuname");
                $.ajax({
                    type: "POST", url: "${basePath}/s/uc/se/s/" + menuid +  "/" + portletid,
                    success: function (data) {
                        $("li[menuid='" + menuid + "']").hide().attr("dy", "true");
                        $(".dyDiv ul.subMenuUl").append('<li title="点击取消订阅" menuid="' + menuid + '" dyid="'
                        + data + '">'
                        + '<div class="fwnr"><img src="' + $li.find("img").attr("src") +
                        '" onError="this.src=\'${basePath}/resources/images/shd/icon_banshidating.png\'"></div>'
                        + '<div class="iconTitleShd">' + $li.find(".iconTitleShd").html() + '</div><div class="qydyan dybutton">取消</div></li>');
                    }
                });
            });
            //取消订阅服务资源
            $(".dyDiv li[menuid] .qydyan").live("click", function () {
                var $li = $(this).parents("li:first");
                var menuid = $li.attr("menuid");
                $.ajax({
                    type: "POST", url: "${basePath}/s/uc/se/d/" + $li.attr("dyid"),
                    success: function () {
                        $li.remove();
                        $("li[menuid='" + menuid + "']").show().removeAttr("dy");//搜索标识
                    }
                });
            });

            $(document).keyup(function (event) {
                if (event.keyCode == '13') {
                    seachService();
                }
            });

            $(".iconTitleShd,.fwnr").live("click",function(){
             //   window.open($(this).parents("li:first").attr("menupath"));
            });
        });
        //列表和分类切换
        function changeFwlx(value) {
            if (value == 1) {
                $("#lx_index2").addClass("choosed");
                $("#lx_index1").removeClass("choosed");
                $(".kdyfwflDiv").show();
                $(".kdyfwDiv").show();
                $(".fwdylbDiv").hide();
            } else {
                $("#lx_index1").addClass("choosed");
                $("#lx_index2").removeClass("choosed");
                $(".kdyfwflDiv").hide();
                $(".kdyfwDiv").hide();
                $(".fwdylbDiv").show();
            }
        }

        //搜索服务
        function seachService() {
            $(".kdyDiv .kdyfwDiv ul li:not([dy])").show().has(".iconTitleShd:not(:contains('" + $("input[name=serviceText]").val() + "'))").hide();
        }
    </script>
    <style>
        .searchButton {
            background-color: blue;
            border: 1px solid #aabbcc;
            font-size: 12px;
            height: 24px;
            line-height: 22px;
            color: white;
        }
        .titleDiv {height: 40px;line-height: 40px;font-size: 20px;text-indent: 10px;color:#959698;text-align: left;margin-bottom: 20px;font-weight: normal;
        }
        .mainDiv .leftDiv .dyDiv{height:560px;}
        .mainDiv .leftDiv .kdyDiv .kdyfwDiv{width: 100%;}
        ul.subMenuUl{width: 100%;margin: 0;list-style: none;}
        ul.subMenuUl li{float: left;width: 150px;margin: 20px 0;position: relative;}
        ul.subMenuUl li div{text-align: center;color:#959698; }
        ul.subMenuUl li div img{position: static;width: auto;height: 60px;}
        .dybutton{
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #0079DA;
            width: 80px;
            border-radius: 5px;
            margin: 10px auto 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
<input type="hidden" name="portletid" id="portletid" value="${portletid}"/>
<div id="main">
    <input type="hidden" id="choosed" value="4"/>
    <jsp:include page="../szgz/left.jsp"/>
    <div id="right">
        <jsp:include page="../szgz/head.jsp"/>
        <div id="contentSub"style="left:0px;position: absolute;">
            <div class="mainDiv" style="border: none;width: 100%;">
                <div class="leftDiv" style="border: none;width: 98%;">
                    <div class="kdyDiv" style="background:#fff;border: none;width: 98%;">
                        <div class="kdySubDiv">
                            <div class="titleDiv">
                                <div style="width: 200px;float:left;"> 可订阅服务</div>
                                <div style="float:left;margin-left: 130px;">
                                    <input type="text" class="search" name="serviceText"/>
                                    <span class="searchButtonSpan" onclick="seachService()">查 询 </span>
                                </div>
                                <div style="float:right;width: 250px;margin-right: 20px;display:none;">
                                    <ul class="lxUl">
                                        <li onclick="changeFwlx(0);" id="lx_index1">列表</li>
                                        <li onclick="changeFwlx(1);" id="lx_index2" class="choosed">分类</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="kdyfwflDiv" style="margin-bottom: 20px;">
                                <div class="turnLeftDiv"><</div>
                                <div class="content">
                                    <div class="typeUlDiv">
                                        <ul class="typeUl">
                                            <c:forEach items="${listMenu}" var="menu" varStatus="status">
                                                <li
                                                        <c:if test="${status.index == 0}">class="choosed"</c:if>>${menu.menuname}</li>
                                            </c:forEach>
                                        </ul>
                                    </div>
                                </div>
                                <div class="turnRightDiv">></div>
                                <div style="clear: both"></div>
                            </div>
                            <div class="kdyfwDiv">
                                <c:forEach items="${listMenu}" var="menu" varStatus="status">
                                    <ul class="subMenuUl <c:if test="${status.index == 0}">choosed</c:if>">
                                        <c:forEach items="${menu.listMenuSub}" var="menuSub">
                                            <li menuid="${menuSub.menuid}" menuname="${menuSub.menuname}"
                                                menutb="${menuSub.tb}" menupath="${menuSub.menupath}">
                                                <div class="fwnr" onclick="return false;window.open('${basePath}/s/uc/se/sd/${menuSub.menuid}')">
                                                    <img src="${basePath}/resources/images/icons/basis/${menuSub.tb}" onerror="this.src='${basePath}/resources/images/icons/basis/icon-<%=rand.nextInt(80)+10%>.png'"  title="查看详情"/></div>
                                                <div class="iconTitleShd">${menuSub.menuname}</div>
                                                <%--<div class="dyan dybutton" title="点击订阅">订阅1${menuSub.tb}</div>--%>
                                                <div class="dyan dybutton" title="点击订阅">订阅</div>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </c:forEach>
                            </div>
                            <div class="fwdylbDiv" style="display: none;">
                                <ul class="subLbMenuUl">
                                    <c:forEach items="${listMenu}" var="menu" varStatus="status">
                                        <c:forEach items="${menu.listMenuSub}" var="menuSub">

                                            <li title="点击订阅" menuid="${menuSub.menuid}" menuname="${menuSub.menuname}"
                                                menutb="${menuSub.tb}">
                                                <input type="checkbox"/>
                                                    ${menuSub.menuname}
                                            </li>

                                        </c:forEach>
                                    </c:forEach>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="dyDiv" style="background: #FAFAFA;border: none;margin-top:10px;width: 98%;">
                        <div class="titleDiv">已订阅服务</div>

                        <div class="kdyfwDiv">
                            <ul class="subMenuUl">
                                <c:forEach items="${listMenuDy}" var="menuSub">
                                    <li menuid="${menuSub.menuid}" dyid="${menuSub.dyid}" menupath="${menuSub.menupath}">
                                        <div class="fwnr" onclick="return false;window.open('${basePath}/s/uc/se/sd/${menuSub.menuid}')">
                                            <img src="${basePath}/resources/images/icons/basis/${menuSub.tb}" onerror="this.src='${basePath}/resources/images/icons/basis/icon-<%=rand.nextInt(80)+10%>.png'"  title="查看详情"/></div>
                                        <div class="iconTitleShd">${menuSub.menuname}</div>
                                        <div class="qydyan dybutton" title="点击取消订阅">取消</div>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <%--<jsp:include page="../shd/foot.jsp"/>--%>
    </div>
</div>
</body>
</html>
